<template>
  <el-select
    v-model="data[value.prop]"
    filterable
    remote
    :placeholder="table.select[value.prop].placeholder || value.label"
    :remote-method="selectRemote"
    @change="selectChange">
    <el-option
      v-for="item in table.select[value.prop]"
      :key="item[value.select.key || 'key']"
      :label="item[value.select.label || 'label']"
      :value="item[value.select.value || 'value']">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default: true,
      },
      value: {
        type: Object,
        default: true,
      },
      table: {
        type: Object,
        default: true,
      },
    },
    methods: {
      selectRemote (query) {
        this.$emit('selectRemote', query, this.value.prop);
      },
      selectChange (value) {
        this.$emit('selectChange', value, this.value.prop);
      },
    },
  };
</script>


<style lang="scss">
  .__dialog{
    .el-dialog__header{
      .title{
        width: calc(100% - 60px);
        display: inline-block;
        p{
          line-height: 1;
          font-size: 16px;
          font-weight: 700;
          color: #1f2d3d;
        }
        span{
          float: right;
          font-size: 14px;
          margin-right: 30px;
        }
      }
    }
    .el-dialog__body{
      padding: 0 20px;
    }
  }
  @media screen and (max-width: 800px) {
    .el-dialog--small, .el-dialog--large{
      top: 0 !important;
      width: 101%;
    }
    .el-message-box{
      width:360px;
    }
  }
</style>
